import React, { useState, useEffect } from 'react'
import '@chatui/core/es/styles/index.less';
// 引入组件
import Chat, { Bubble, useMessages } from '@chatui/core';
// 引入样式
import '@chatui/core/dist/index.css';
import HeaderNav from '../../../../components/ayq/HeaderNav'
import './index.less'

const initialMessages = [
  {
    type: 'text',
    content: { text: '主人好，我是智能助理，你的贴心小助手~' },
    user: { avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg' },
  },
  {
    type: 'image',
    content: {
      picUrl: '//img.alicdn.com/tfs/TB1p_nirYr1gK0jSZR0XXbP8XXa-300-300.png',
    },
  },
];

// 默认快捷短语，可选
const defaultQuickReplies = [
  {
    icon: 'message',
    name: '联系人工服务',
    isNew: true,
    isHighlight: true,
  },
  {
    name: '退换货',
    isNew: true,
  },
  {
    name: '物流查询',
    isHighlight: true,
  },
  {
    name: '售后查询',
  },
];

export default function Customer() {
  const { messages, appendMsg, setTyping } = useMessages([]);
  // 发送回调
  function handleSend(type, val) {
    // type:发送内容类型 val:发送内容
    if (type === 'text' && val.trim()) {
      // TODO: 发送请求
      appendMsg({
        type: 'text',
        content: { text: val },
        position: 'right',
      });

      setTyping(true);

      // 模拟回复消息
      setTimeout(() => {
        appendMsg({
          type: 'text',
          content: { text: '亲，您遇到什么问题啦？请简要描述您的问题~' },
        });
      }, 1000);
    }
  }
   // 快捷短语回调，可根据 item 数据做出不同的操作，这里以发送文本消息为例
   function handleQuickReplyClick(item) {
    handleSend('text', item.name);
  }

  function renderMessageContent(msg) {
    const { type, content } = msg;

    // 根据消息类型来渲染
    switch (type) {
      case 'text':
        return <Bubble content={content.text} />;
      case 'image':
        return (
          <Bubble type="image">
            <img src={content.picUrl} alt="" />
          </Bubble>
        );
      default:
        return null;
    }
  }
  return (
    <div className='customer'>
      <HeaderNav title="在线客服" />
      <div className='body'>
      <Chat
        messages={messages}
        renderMessageContent={renderMessageContent}  //判断传递图片
        quickReplies={defaultQuickReplies}   //展示快捷展示按钮
        onQuickReplyClick={handleQuickReplyClick}
        onSend={handleSend}  //发送回调
      />
      </div>
    </div>
  )
}
